export default ({ handleShowDevice }) => {
  const data = [
    {
      no: '001',
      time: '292h',
      status: '作业中',
      warning: '无',
      text: '一号',
    },
    {
      no: '002',
      time: '123h',
      status: '作业中',
      text: '二号',
      warning: '无',
    },
    {
      no: '003',
      time: '223h',
      status: '作业中',
      text: '三号',
      warning: '无',
    },
    {
      no: '004',
      time: '163h',
      status: '作业中',
      text: '四号',
      warning: '无',
    },
    {
      no: '005',
      time: '173h',
      status: '作业中',
      text: '五号',
      warning: '无',
    },
    {
      no: '006',
      time: '120h',
      text: '六号',
      status: '作业中',
      warning: '无',
    },
  ]

  return (
    <div className="left-two">
      <div className="box-title">设备监控</div>
      <div
        className="box-content center-two-content "
        style={{ height: '316px', color: '#95f3f5', padding: '20px' }}
      >
        <div
          style={{
            background: '#162d79',
            borderRadius: '12px',
            padding: '12px',
          }}
        >
          <div
            className="dis-flex paddingBottom-12 "
            style={{
              marginBottom: '12px',
            }}
          >
            <div className="header item flex1">生产线编号</div>
            <div className="header item flex1">工作时长</div>
            <div className="header item flex1">工作状态</div>
            <div className="header item flex1">异常告警</div>
            <div className="header item flex1">操作</div>
          </div>
          {data.map((item, index) => {
            return (
              <div className="dis-flex marginBottom-12" key={index}>
                <div className="item flex1 ">{item.no}</div>
                <div className="item flex1">{item.time}</div>
                <div className="item flex1">
                  <span className="status">{item.status}</span>
                </div>
                <div className="item flex1">{item.warning}</div>
                <div
                  className="item flex1 dis-flex"
                  style={{ justifyContent: 'center' }}
                >
                  <div
                    className="check-btn"
                    onClick={() => {
                      handleShowDevice(item.text)
                    }}
                  >
                    查看
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}
